<template>
	<view class="recommend-container">
		<view v-for="item in recommendData" class="recommend-item" :key="item._id">
			<image :src="item.imagePath" mode=""></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { getRecommendApi } from '../../api/home';

	const recommendData = ref([])


	onMounted(() => {
		getData();
	})


	async function getData() {
		const res = await getRecommendApi();
		if (res.code == 200) {
			recommendData.value = res.data;
		}
		// // 发请求
		// uni.request({
		// 	url: 'http://nocat.life:3017/foods/getRecommend',
		// 	method: 'GET',
		// }).then(res => {
		// 	if (res.data.code == 200) {
		// 		recommendData.value = res.data.data;
		// 	}
		// })
	}
</script>

<style scoped lang="scss">
	.recommend-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin: 20rpx 0;
	}
	
	.recommend-item {
		image {
			height: 248rpx;
			width: 100%;
			border-radius: 10rpx;
		}
		
		text {
			font-size: 24rpx;
		}
	}
</style>